<template>
  <div class="apiglbox">
    <header-comm></header-comm>
    <div class="header_sele">
      <div class="btn_box">
        <a-button class="new_api_btn" type="primary">
          <router-link to="/apilist">+申请新数据</router-link>
        </a-button>
      </div>
      <div class="add_qy">
        <a-input-search
          placeholder="已申请数据检索"
          @change="dataretrieval"
          v-model="data_retrieval"
          style="width: 250px"
        />
      </div>
    </div>
    <div class="bcg">
      <div class="api_gl">
        <a-table :columns="columns" @change="getmyApiList" 
        :scroll="{ x: 1400 }"
        :pagination="pagination" :data-source="myApiList">
          <a slot="name" slot-scope="text">{{ text }}</a>

          <template slot="state" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text=='通过'">{{text}}</a-tag>
            <a-tag color="#f50" v-if="text=='不通过'">{{text}}</a-tag>
            <a-tag color="#ccc" v-if="text=='停用'">{{text}}</a-tag>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <a class="del" href="javascript:;" @click="apiExamine(record,1)">通过</a>
              <a class="del" href="javascript:;" @click="apiExamine(record,2)">拒绝</a>
              <a class="del" href="javascript:;" @click="apiExamine(record,3)">停用</a>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
const columns = [
  {
    title: "接口编码",
    dataIndex: "apiCode",
    key: "apiCode",
    scopedSlots: { customRender: "apiCode" }
  },
  {
    title: "接口名称",
    dataIndex: "applyApiName",
    key: "applyApiName"
  },
   {
    title: "申请公司",
    dataIndex: "applyCompany",
    key: "applyCompany"
  },
   {
    title: "联系人",
    dataIndex: "applyPeople",
    key: "applyPeople"
  },
   {
    title: "手机",
    dataIndex: "applyPhone",
    key: "applyPhone"
  },
  {
    title: "总次数",
    dataIndex: "buyNum",
    key: "buyNum"
  },
   {
    title: "剩余次数",
    dataIndex: "surplusNum",
    key: "surplusNum"
  },
  {
    title: "密钥(请勿泄露给他人)",
    dataIndex: "keyName",
    key: "keyName"
  },
  {
    title: "状态",
    dataIndex: "state",
    key: "state",
    scopedSlots: { customRender: "state" }
  },
    {
    title: "申请时间",
    dataIndex: "dateline",
    key: "dateline",
    scopedSlots: { customRender: "dateline" }
  },
 
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    fixed:'right',
    width:200
  }
];
var myApiList = [];
export default {
  data() {
    return {
      columns,
      myApiList,
      data_retrieval: "",
        pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
    };
  },
  components: {
    headerComm
  },
  methods: {
    getmyApiList(pagination) {
      this.pagination.current = pagination.current;

      this.axios
        .post(
          "dataCenter/myApiList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            keywords: this.data_retrieval,
             phone:this.$store.state.bbl_phone,
            apiType:2
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.myApiList = res.data.result.data;
          } else {
            this.myApiList = [];
          }
        });
    },
    dataretrieval() {
      this.getmyApiList(this.pagination);
    },
    apiExamine(value, key) {

      this.axios
        .post(
          "dataCenter/apiExamine.php",
          qs.stringify({
            id_num: value.id_num,
            examine_type: key
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
                  this.getmyApiList(this.pagination);

          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },

  created() {
        this.getmyApiList(this.pagination);

  }
};
</script>

<style lang='less'>
.apiglbox{
  .header_sele{
    left: 10%!important;
  }
}
.api_gl {
  position: relative;
  top: 143px;
  left: 1%;
  background: #fff;
  width: 98%;
  padding: 20px;
  
}
  .new_api_btn {
      background: #00c4ff!important;
      border-color: #00c4ff!important;
    }
</style>
